<template>
  <form-container 
    :title="formState.id ? '编辑产线信息' : '新增产线信息'" 
    :width="700" 
    :visible="visible" 
    :destroy-on-close="true" 
    @close="onClose"
  >
    <a-form 
      ref="formRef" 
      :model="formState" 
      :rules="formRules" 
      layout="vertical"
    >
      <a-form-item label="编码：" name="lineCode">
        <a-input 
          v-model:value="formState.lineCode" 
          placeholder="请输入编码" 
          allow-clear 
        />
      </a-form-item>

      <a-form-item label="名称：" name="lineName">
        <a-input 
          v-model:value="formState.lineName" 
          placeholder="请输入名称" 
          allow-clear 
        />
      </a-form-item>

      <a-form-item label="所属车间：" name="workshopId">
        <a-select
          v-model:value="formState.workshopId"
          placeholder="请选择车间"
          :options="workshopOptions"
          :loading="workshopLoading"
          allow-clear
        ></a-select>
      </a-form-item>

      <a-form-item label="备注：" name="lineDesc">
        <a-input 
          v-model:value="formState.lineDesc" 
          placeholder="请输入备注" 
          allow-clear 
        />
      </a-form-item>
    </a-form>

    <template #footer>
      <a-button style="margin-right: 8px" @click="onClose">关闭</a-button>
      <a-button type="primary" :loading="submitLoading" @click="handleSubmit">
        保存
      </a-button>
    </template>
  </form-container>
</template>

<script setup name="LineForm">
import { ref, reactive, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import { required } from '@/utils/formRules'
import workshopApi from '@/api/mes/basicdata/workshopApi'
import lineApi from '@/api/mes/basicdata/lineApi'

const emit = defineEmits(['successful'])
const visible = ref(false)
const formRef = ref()
const submitLoading = ref(false)

// 表单初始状态
const initialFormState = () => ({
  lineCode: '',
  lineName: '',
  workshopId: undefined,
  lineDesc: ''
})
const formState = reactive(initialFormState())

// 表单验证规则
const formRules = reactive({
  lineCode: [required('请输入编码')],
  lineName: [required('请输入名称')],
  workshopId: [required('请选择车间')]
})

// 车间下拉框相关
const workshopOptions = ref([])
const workshopLoading = ref(false)

// 获取车间列表
const loadWorkshops = async () => {
  try {
    workshopLoading.value = true
    const { records } = await workshopApi.workshopPage()
    workshopOptions.value = records.map(item => ({
      label: item.workshopName,
      value: item.id
    }))
  } catch (error) {
    message.error('车间列表加载失败')
    console.error('获取车间列表失败', error)
  } finally {
    workshopLoading.value = false
  }
}

// 打开抽屉
const onOpen = (record) => {
  visible.value = true
  Object.assign(formState, record || initialFormState())
}

// 关闭抽屉
const onClose = () => {
  formRef.value.resetFields()
  visible.value = false
}

// 提交处理
const handleSubmit = async () => {
  try {
    await formRef.value.validate()
    submitLoading.value = true
    
    await lineApi.lineUpdate(formState)
      emit('successful', { ...formState })
      onClose()
  } catch (error) {
    if (error?.errorFields) {
      return message.warning('请正确填写所有必填字段')
    }
    console.error('提交异常:', error)
  } finally {
    submitLoading.value = false
  }
}

onMounted(loadWorkshops)
defineExpose({ onOpen })
</script>